<template>
  <div class="container flc" :style="{ paddingTop: `${45 + statusBarHeight}px` }">
    <NavBar 
      :navBarStyle="{
        backgroundColor: navBarBg,
        height: `${45 + statusBarHeight}px`,
        paddingTop: `${statusBarHeight}px`,
      }"
      pageName="扫码绑本"
      @onLeftClick="leftBack" 
    >
      <div slot="nav-right" class="fl vc end">
        <div class="img36 flvcc" @click="showSearch = !showSearch">
          <img src="@/assets/images/icon_search.png" class="img24" />
        </div>
      </div>
    </NavBar>
    <div class="fls fl vc mb10 plr_16" v-if="showSearch">
      <van-field
        v-model.trim="queryParams.storeName"
        left-icon="search"
        placeholder="输入关键字"
      />
      <p class="dx_15 color_16 fl end wb20" @click="resetSearch">搜索</p>
    </div>
    <div class="hb flc">
      <div class="fls">
        <van-tabs v-model="activeTab" @change="changeStatus">
          <van-tab v-for="item in tabList" :key="item.value" :title="item.label" :name="item.value"></van-tab>
        </van-tabs>
      </div>
      <div class="fl1 flau plr_16" ref="scrollRef">
        <div v-if="bindList.length == 0" class="bg_fff">
          <van-empty description="暂无数据~" />
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="bindList.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <div class="mb10" v-for="(item, index) in bindList" :key="item.id" @click="openBindDetail(item, index)">
            <BindItem :item="item"></BindItem>
          </div>
        </van-list>
      </div>
    </div>
    <!-- <div class="empty_wrap"></div> -->
    <BindDetail ref="BindDetail" @refresh="updateList"></BindDetail>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue'
import BindItem from './components/BindItem.vue'
import BindDetail from './components/BindDetail.vue'
import { List, Tab, Tabs, Field } from 'vant';
import { navOtherHeight } from '@/config/config'
import { getBindList } from '@/api/bind.js'
export default {
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Field.name]: Field,
    NavBar,
    BindItem,
    BindDetail
  },

  data() {
    return {
      navBarBg: 'transparent',
      navigationHeight: 47,
      statusBarHeight: 0,
      navOtherHeight,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        bindStatus: null,
        storeName: ''
      },
      showSearch: false,
      activeTab: 1,
      tabList: [
        {
          value: 1,
          label: '全部'
        },
        {
          value: 4,
          label: '绑定中'
        },
        {
          value: 5,
          label: '已通过'
        },
      ],
      loading: true,
      finished: false,
      bindList: []
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.queryParams.bindStatus = null
        this.getBindList()
      }
    }
  },

  created() {
    this.getAPPNavHeight()
    if (this.$store.state.token) {
      this.queryParams.bindStatus = null
      this.getBindList()
    }
  },

  methods: {
    
    onLoad() {
      console.log('到底')
      this.queryParams.pageNum += 1
      this.getBindList()
    },

    resetSearch() {
      this.queryParams.pageNum = 1
      this.$refs.scrollRef.scrollTop= 0
      this.handleParams()
      this.getBindList()
    },

    // 切换绑定状态查询
    changeStatus() {
      this.queryParams.storeName = ''
      this.resetSearch()
    },

    handleParams () {
      switch (parseInt(this.activeTab)) {
        case 1: 
          this.queryParams.bindStatus = null
          break
        case 2:
          this.queryParams.bindStatus = null
          break
        case 3:
          this.queryParams.bindStatus = null
          break
        case 4:
          this.queryParams.bindStatus = 10
          break
        case 5:
          this.queryParams.bindStatus = 20
          break
        default:
          break
      }
    },

    // 打开绑定详情
    openBindDetail(item, index) {
      this.$refs.BindDetail.initData(item, index)
    },

    updateList(item, index) {
      this.bindList[index] = item
    },

    leftBack () {
      console.log('点击了', window)
      if (window.androidJSBridge) {
        window.androidJSBridge.back()
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.back.postMessage({})
      }
    },

    getAPPNavHeight () {
      console.log('--appNavigation--', window)
      if (window.androidJSBridge) {
        const result = JSON.parse(window.androidJSBridge.appNavigation())
        this.navigationHeight = result.navigationHeight
        this.statusBarHeight = result.statusBarHeight
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
        console.log('android1', result)
        this.getBindList()
      } else if (window.webkit) {
        console.log('ios-appNavigation')
        window.appNavigation = this.onAppNavigation
        window.webkit.messageHandlers.appNavigation.postMessage({})
      } else {
        this.navigationHeight = 0
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
      }
    },

    onAppNavigation (result) {
      console.log('ios--appNavigation', result)
      this.navigationHeight = Number(result.navigationHeight)
      this.statusBarHeight = Number(result.statusBarHeight)
      document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
    },

    // 获取绑定列表
    async getBindList () {
      try {
        const params = {
          request: {
            ...this.queryParams
          }
        }
        const res = await getBindList(params)
        console.log('绑定列表', res)
        if (res.errorCode === 0) {
          if (res.response.records.length) {
            this.bindList = this.queryParams.pageNum > 1 ? [...this.bindList, ...res.response.records] : res.response.records
          }
          else {
            this.bindList = this.queryParams.pageNum > 1 ? this.bindList : res.response.records
          }
          if (res.response.records.length < this.queryParams.pageSize) {
            this.finished = true
            this.loading = true
          } else {
            this.finished = false
            this.loading = false
          }
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.container {
  height: calc(100vh - var(--navHeight));
  // padding-bottom: 40px;
  .van-tabs {
    margin-bottom: 10px;
  }
  .van-tabs__nav {
    background: transparent;
  }
  .van-tab__text--ellipsis {
    color: #8C8C8C;
    font-size: 14px;
  }
  .van-tabs__line {
    background-color: #131419;
    height: 2px;
  }
  .van-tab--active .van-tab__text--ellipsis {
    color: #131419;
    font-size: 16px;
    font-weight: 600;
  }
  .van-cell {
    border-radius: 8px;
  }
}
.empty_wrap {
  width: 100%;
  height: var(--navHeight);
  background-color: #F6F6F6;
  position: fixed;
  bottom: 0;
  left: 0;
}
.pad_10_16 {
  padding: 10px 16px;
}
.pad_8_20 {
  padding: 8px 20px;
}
.pad_12 {
  padding: 12px;
}

.pdl_12 {
  padding-left: 12px;
}
.bind_wrap {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(209, 251, 113, 0.32) 0%, rgba(209, 251, 113, 0.00) 100%);
  font-size: 15px;
  padding: 4px 8px;
}
.w23 {
  width: 23px;
}

</style>
